<template>
  <div style="padding-bottom: 0px">
    <el-container>
      <el-head>
        <el-upload
        
          class="upload-demo"
          action
          :on-change="handleChange"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :limit="100"
          :show-file-list="false"
          accept="application/vnd.openxmlformats-    
        officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          :auto-upload="false"
        >
          <el-button
            :loading="importLoading"
            type="primary"
            icon="el-icon-upload2"
            size="mini"
            >上传数据</el-button
          >
        </el-upload>
      </el-head>
    </el-container>
  </div>
</template>

<script>
import path from "path";
import { deepClone } from "@/utils";

export default {
  props: {
    UploadArr: [],
  },
  data() {
    return {
      importLoading: false,
      Uploadlist: [],
    };
  },
  computed: {
    routesData() {
      return this.routes;
    },
  },
  created() {},

  methods: {
    //上传文件时处理方法
  async  handleChange(file, fileList) {
      this.importLoading = true;
      this.fileTemp = file.raw;
      
      if (this.fileTemp) {
           
       
        if (
         this.fileTemp.name.endsWith('.xlsx') ||   this.fileTemp.name.endsWith('.xls')||   this.fileTemp.name.endsWith('.txt')||
          this.fileTemp.type ==
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
          this.fileTemp.type == "application/vnd.ms-excel"
        ) {
          this.importfxx(this.fileTemp);
          //this.returnData(date)
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请删除后重新上传！",
          });
          this.importLoading = false;
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！",
        });
        this.importLoading = false;
      }
    },
    //超出最大上传文件数量时的处理方法
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    //移除文件的操作方法
    handleRemove(file, fileList) {
      this.fileTemp = null;
    },
    //上传对数据处理
    importfxx(obj) {
      let _this = this;
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据

      this.file = event.currentTarget.files[0];

      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;

      var reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
           

        reader.onload = function (e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
           
           
          //此处引入，用于解析excel
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64",
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary",
            });
          }
        
          
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          //outdata就是读取的数据（不包含标题行即表头，表头会作为对象的下标）
          //此处可对数据进行处理
          let arr = [];
          _this.Uploadlist=[];
          outdata.map((v) => {
            let obj = {};
            for (let i = 0; i < _this.UploadArr.length; i++) {
              var key = _this.UploadArr[i].Fieldname;
              var name = _this.UploadArr[i].CName;
              obj[key] = v[name];
            }
            arr.push(obj);
          });
          for (let i = 0; i < arr.length; i++) {
            _this.Uploadlist.push(arr[i]);
          }
          _this.returnData();
          _this.importLoading = false;
          return arr;
        };
        reader.readAsArrayBuffer(f);
      };
      
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
        //  this.returnData();
      }

    },
    returnData(){
      this.$emit("returnData",  this.Uploadlist);
    }
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .EditObjs-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 5px;
  }
}

.el-dropdown {
  vertical-align: top;
  margin-left: 10px;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
